<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文件上传</title>


    <meta name="content-type" content="text/html; charset=UTF-8"/>

    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <link th:href="@{/statics/css/fileinput.min.css}" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="container kv-main">

    <div class="page-header">
        <h2><small>上传网络网络图片</small></h2>
    </div>
    <form class="form-inline" style="margin-left: 40%" action="/image/url" method="post">

        <div class="form-group">
            <input type="text" name="url" style="width: 250px" class="form-control" placeholder="复制图片超链接到这里">
        </div>
        <button type="submit" class="btn btn-primary mb-2">上传</button>
    </form>
    <hr>
    <div class="page-header">
        <h2><small>上传本地文件</small></h2>
    </div>


    <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">描述</span>
        <input type="text" id="desc" name="desc" class="form-control" placeholder="添加对上传图片的说明"
               aria-describedby="sizing-addon1">
    </div>
    <hr>

    <form enctype="multipart/form-data">
        <input id="file-zh" name="file" type="file" multiple>

    </form>
    <hr>
    <br>
</div>


</body>

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script th:src="@{/statics/js/modules/news/fileinput.min.js}" type="text/javascript"></script>
<script th:src="@{/statics/js/modules/news/locales/zh.js}" type="text/javascript"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js" type="text/javascript"></script>

<script>


    $('#file-zh').fileinput({
        language: 'zh',
        uploadUrl: '/pic',
        //allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileSize: 10240,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        uploadExtraData: function () {
            var obj = {};
            var val = $('#desc').val();
            obj['desc'] = val;
            return obj;
        }
    });

    $("#file-1").fileinput({
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 10240,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    /*
    $(".file").on('fileselect', function(event, n, l) {
        alert('File Selected. Name: ' + l + ', Num: ' + n);
    });
    */
    $("#file-3").fileinput({
        showUpload: false,
        showCaption: false,
        browseClass: "btn btn-primary btn-lg",
        fileType: "any",
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
    });
    $("#file-4").fileinput({
        uploadExtraData: {kvId: '10'}
    });
    $(".btn-warning").on('click', function () {
        if ($('#file-4').attr('disabled')) {
            $('#file-4').fileinput('enable');
        } else {
            $('#file-4').fileinput('disable');
        }
    });
    $(".btn-info").on('click', function () {
        $('#file-4').fileinput('refresh', {previewClass: 'bg-info'});
    });
    /*
    $('#file-4').on('fileselectnone', function() {
        alert('Huh! You selected no files.');
    });
    $('#file-4').on('filebrowse', function() {
        alert('File browse clicked for #file-4');
    });
    */
    $(document).ready(function () {
        $("#test-upload").fileinput({
            'showPreview': false,
            'allowedFileExtensions': ['jpg', 'png', 'gif'],
            'elErrorContainer': '#errorBlock'
        });
        /*
        $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
            alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
        });
        */
    });
</script>
</html>